<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  <title>08-函数进阶</title>
  <style type="text/css">
  * {
    padding: 0;
    margin: 0;
  }
    </style>
</head>
<body>
  <div class="container">
    <h1>08-函数进阶</h1>
    <button desc="hdcms">button</button>
  </div>
  <script src="https://cdn.staticfile.org/jquery/3.2.0/jquery.js"></script>
  <script src="index.js"></script>
  <script type="text/javascript">
  /*
  // 匿名函数
  var Dom = {
    site: "后盾人",
    bind() {
      const button = document.querySelector("button");
      button.addEventListener("click", function() {
        alert(this.getAttribute("desc"));
      });
    }
  };
  Dom.bind();
  */
  

  /*
  // 箭头函数
  let Dom = {
    site: "后盾人",
    bind() {
      const button = document.querySelector("button");
      button.addEventListener("click", event => {
        alert(this.site + event.target.innerHTML);
      });
    }
  };
  Dom.bind();
  */
 

 let Dom = {
    site: "后盾人",
    handleEvent: function(event) {
      console.log(this);
    },
    bind() {
      const button = document.querySelector("button");
      button.addEventListener("click", this);
    }
  };
  Dom.bind();

  </script>
</body>
</html>